<template>
  <div class="app-container">
    <div style="padding-right: 100px">
      <el-form :model="data" v-bind="formProps">
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否通用">
              <span slot="label">
                <span class="text-red">*</span>
                <span>是否通用</span>
              </span>
              <el-select v-model="data.is_common" :disabled="isCommonDisable" clearable filterable style="width: 100%"
                @change="commonChange">
                <el-option label="否" :value="0"> </el-option>
                <el-option label="是" :value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规则编号">
              <span slot="label">
                <span class="text-red">*</span>
                <span>规则编号</span>
              </span>
              <el-input v-model="data.barcode_rule_no" clearable style="width: 100%"> </el-input>
              <!-- <el-select v-model="data.document_type" clearable filterable style="width: 100%" :disabled="!!data.id">
                <el-option v-for="o in typeOptions" :key="o.value" :label="o.label" :value="o.value"> </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规则名称">
              <span slot="label">
                <span class="text-red">*</span>
                <span>规则名称</span>
              </span>
              <el-input v-model="data.rule_name" clearable style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条码类型">
              <span slot="label">
                <span class="text-red">*</span>
                <span>条码类型</span>
              </span>
              <el-select v-model="data.type" clearable filterable style="width: 100%" @change="labelTypeChange">
                <el-option v-for="o in labelTypeOptions" :key="o.value" :label="o.label" :value="o.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条码层级" v-if="data.is_common == 0 && data.type == 3">
              <el-select v-model="data.level" clearable filterable style="width: 100%">
                <el-option v-for="o in levelOptions" :key="o.value" :label="o.label" :value="o.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规则描述">
              <el-input v-model="data.rule_description" clearable style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区段分隔符">
              <el-input v-model="data.split_char" clearable style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="text-right">
        <el-button v-if="!formProps.disabled" :type="barCodeId ? 'warning':'primary'" @click.native="submit(false)"
          :loading="submitLoading">
          {{barCodeId ? '保存':'确认'}}
        </el-button>
        <el-button v-if="!formProps.disabled && !barCodeId" type="warning" @click.native="submit(true)"
          :loading="submitLoading2">
          确认并下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import { getToken } from '@/utils/auth'

export default {
  mixins: [commonMixin],
  data() {
    return {
      api: this.$api.barcodeRule,
      apiEdit: this.$api.barcodeRule + 'modify',
      formProps: {
        dialogWidth: '80%',
        labelWidth: '120px',
      },
      labelTypeOptions: [],
      levelOptions: [],
      data: {},
      initData: { is_common: 0, barcode_rule_no: '', id: null, rule_name: '', type: '', level: '' },
      isCommonDisable: false,
      submitLoading2: false,
    }
  },
  props: {
    isCommon: {
      type: Number,
      default: 0,
    },
    barCodeId: {
      type: String,
      default: '',
    },
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(v) {
        // if (this.$route.query && this.$route.query.id) this.$emit('update:barCodeId', v.query.id)
        // else this.$parent.barCodeId = ''
        this.$emit('update:barCodeId', v.query.id)
        this.isCommonDisable = !!v.query.id
      },
    },
    barCodeId: {
      immediate: true,
      handler(v, o) {
        if (!!v && v !== o) {
          this.getInfo()
        } else {
          this.data = _.cloneDeep(this.initData)
        }
      },
    },
    'data.is_common': {
      deep: true,
      immediate: true,
      handler(v) {
        this.$emit('update:isCommon', v)
      },
    },
  },
  created() {
    this.getDictionary()
    this.getPackageLevel()
  },
  methods: {
    getInfo() {
      this.pageLoading = true
      this.$request(this.api + 'getbyid', {
        id: this.barCodeId,
      })
        .then((r) => {
          this.data = this.formatAfterGet(r)
          this.$emit('update:isCommon', r.is_common)
          this.isCommonDisable = Boolean(r.id)
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    formatAfterGet(data) {
      let tmp = _.cloneDeep(data)
      tmp.type = tmp.type.toString()
      return tmp
    },
    getDictionary() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'barcode_label_type',
      }).then((r) => {
        this.labelTypeOptions = this.arrayOptions(r, 'value', ['label'])
      })
    },
    getPackageLevel() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'package_level_name',
      }).then((r) => {
        this.levelOptions = this.arrayOptions(r, 'value', ['label'])
      })
    },
    commonChange() {
      if (this.data.is_common == 0) {
        this.data.level = ''
      }
    },
    labelTypeChange() {
      if (this.data.label_type != 3) this.data.level == null
    },
    submit(flag) {
      let tmp = _.cloneDeep(this.data)
      if (!flag) this.submitLoading = false
      else this.submitLoading2 = false
      let url = this.apiEdit
      if (!Boolean(tmp.barcode_rule_no)) {
        if (!flag) this.submitLoading = false
        else this.submitLoading2 = false
        return this.$message.error('规则编号必填')
      }
      if (!Boolean(tmp.rule_name)) {
        if (!flag) this.submitLoading = false
        else this.submitLoading2 = false
        return this.$message.error('规则名称必填')
      }
      this.$emit('update:isCommon', tmp.is_common)
      // this.formData.append('model', JSON.stringify(this.data))
      this.$request(url, tmp, 'post')
        .then((r) => {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          if (!tmp.id) {
            this.$emit('update:barCodeId', r)
            this.$router.push({
              name: 'barcodeInfo',
              query: {
                isEidt: true,
                id: r,
              },
            })
          }
          if (flag) {
            this.$emit('update:currentTab', 'tab2')
          }
        })
        .catch(() => {
          if (!flag) this.submitLoading = false
          else this.submitLoading2 = false
        })
    },
  },
}
</script>

<style lang="scss">
</style>